/*
 * @Description: 文件描述
 * @Author: 1+
 * @Date: 2024-03-18 08:43:38
 * @LastEditors: 1+
 * @LastEditTime: 2024-08-22 20:06:04
 */
import { mapMutations, mapActions } from 'vuex'
import debounce from 'lodash/debounce'
let mixins = {
  mounted () {
    this.setEditCanvas({ key: 'editLayoutDom', value: document.querySelector('.content-edit') })
    this.setEditCanvas({ key: 'editContentDom', value: document.querySelector('#chart-edit-content') })
    // 监听初始化
    this.computedScale()
    window.addEventListener('resize', debounce(this.computedScale, 200))
  },
  methods: {
    ...mapMutations('chartEdit', ['setEditCanvas']),
    ...mapActions('chartEdit', ['computedScale']),
    useSizeStyle (attr, scale) {
      if (!attr) return {}
      return {
        width: `${scale ? scale * attr.w : attr.w}px`,
        height: `${scale ? scale * attr.h : attr.h}px`
      }
    },
    useComponentStyle (attr, index) {
      if (!attr) return {}
      return {
        zIndex: index + 1,
        left: `${attr.x}px`,
        top: `${attr.y}px`
      }
    },
    // 锚点位置
    usePointStyle (point, index, attr, cursorResize) {
      const { w: width, h: height } = attr
      const isTop = /t/.test(point)
      const isBottom = /b/.test(point)
      const isLeft = /l/.test(point)
      const isRight = /r/.test(point)
      let newLeft = 0
      let newTop = 0
      // 四个角的点
      if (point.length === 2) {
        newLeft = isLeft ? 0 : width
        newTop = isTop ? 0 : height
      } else {
        // 上下两点的点，宽度居中
        if (isTop || isBottom) {
          newLeft = width / 2
          newTop = isTop ? 0 : height
        }
        // 左右两边的点，高度居中
        if (isLeft || isRight) {
          newLeft = isLeft ? 0 : width
          newTop = Math.floor(height / 2)
        }
      }
      const style = {
        left: `${newLeft}px`,
        top: `${newTop}px`,
        cursor: cursorResize[index] + '-resize'
      }
      return style
    }
  },
  destroyed () {
    this.setEditCanvas({ key: 'editLayoutDom', value: null })
    this.setEditCanvas({ key: 'editContentDom', value: null })
    window.removeEventListener('resize', debounce(this.computedScale, 200))
  }
}
export default mixins